<template>
    <div>
        <h1>延迟保存到本地存储示例</h1>
        <!-- 输入框 -->
        <input type="text" v-model="inputText" @input="onInput" placeholder="请输入内容" />
        <!-- 显示本地存储的内容 -->
        <p>本地存储中的内容：{{ storedText }}</p>
        <!-- 保存提示 -->
        <p v-if="saveMessage" style="color: green;">{{ saveMessage }}</p>
    </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
    name: "DelayedLocalStorage", // 组件名称
    setup() {
        // 响应式数据
        const inputText = ref(""); // 用户输入的文本
        const storedText = ref(""); // 本地存储中的内容
        const saveMessage = ref(""); // 保存成功的提示
        let saveTimeout = null; // 定时器引用

        // 初始化本地存储中的值
        onMounted(() => {
            const savedText = localStorage.getItem("savedText") || "";
            storedText.value = savedText; // 初始化显示本地存储的内容
            inputText.value = savedText; // 同步输入框内容
        });

        // 输入事件：延迟保存
        const onInput = () => {
            // 如果已经存在未完成的保存操作，清除定时器
            if (saveTimeout) clearTimeout(saveTimeout);

            // 设置新的定时器，延迟 1 秒保存内容到本地存储
            saveTimeout = setTimeout(() => {
                localStorage.setItem("savedText", inputText.value); // 保存到 localStorage
                storedText.value = inputText.value; // 更新显示的本地存储内容
                saveMessage.value = "内容已保存！"; // 显示保存成功提示

                // 1 秒后清除保存成功提示
                setTimeout(() => {
                    saveMessage.value = "";
                }, 1000);
            }, 1000);
        };

        // 返回数据和方法
        return {
            inputText,
            storedText,
            saveMessage,
            onInput,
        };
    },
};
</script>

<style scoped>
h1 {
    font-size: 20px;
    margin-bottom: 10px;
}

input {
    padding: 5px;
    font-size: 16px;
    width: 300px;
    margin-bottom: 10px;
}

p {
    margin-top: 10px;
    font-size: 14px;
    color: gray;
}
</style>
